<template>
  <!-- 弹框 -->
  <a-modal
    okText="提交"
    width="600px"
    :closable="false"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="submit"
    @cancel="handleCancel"
    :bodyStyle="{color:''}"
  >
    <div class="top-title">编辑</div>
    <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" class="mt-30">
      <a-form-item label="需求名称">
        <a-input
          v-decorator="[
              'demandProductName',
              {
                rules: [{ required: true,message:'请输入需求名称' }],
                initialValue:defultForm.demandProductName
              },
            ]"
        />
      </a-form-item>
      <a-form-item label="产品同义名称">
        <a-input
          v-decorator="[
              'productSynonymName',
              {initialValue:defultForm.productSynonymName}
            ]"
        />
        <em>多个名称使用分隔符(;)进行区分</em>
      </a-form-item>
      <a-form-item label="产品分类别">
        <div class="clearfix">
          <a-select
            placeholder="请选择"
            style="width: 120px"
            class="f-left mr-32"
            @change="handleChange"
            v-decorator="[
              'productOneCategory',
              {initialValue:defultForm.productOneCategory}
            ]"
          >
            <a-select-option
              v-for="(item,index) in selectType"
              :key="index"
              :value="item.categoryNo"
            >{{ item.categoryName }}</a-select-option>
          </a-select>
          <a-form-item class="f-left mr-32">
            <a-select
              placeholder="请选择"
              style="width: 120px"
              @change="handleChange1"
              v-decorator="['productSecondCategory',{initialValue:defultForm.productSecondCategory}]"
            >
              <a-select-option
                v-for="(item, index) in selectType1"
                :key="index"
                :value="item.categoryNo"
              >{{ item.categoryName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="f-left">
            <a-input
              style="width:200px"
              placeholder="C974（显示器件制造）"
              v-decorator="[
                    'productThirdCategory',
                    {initialValue:defultForm.productThirdCategory}
                  ]"
            />
          </a-form-item>
          <!-- </a-form-item> -->
        </div>
        <em>可输入小类，多个名称使用分隔符（;）进行区分</em>
      </a-form-item>
      <a-form-item label="规格型号">
        <a-input
          type="textarea"
          :rows="10"
          v-decorator="[
                'productSpec',
                { rules: [
                  { required: true,message:'请输入规则型号' },
                  { max:200,message:'该内容最多为200字'}
                  ],
                  initialValue:defultForm.productSpec
                 },
              ]"
        />
        <em>多个名称使用分隔符(;)进行区分</em>
      </a-form-item>
      <a-form-item label="概述">
        <a-input
          type="textarea"
          v-decorator="[
                'demandDetails',
                { rules: [{ max:200,message:'该内容最多为200字'}],
                initialValue:defultForm.demandDetails },
              ]"
        />
      </a-form-item>
      <a-form-item label="预算价格">
        <a-input
          v-decorator="['price',
          {initialValue:defultForm.price},
          {rules: [
          { 
            pattern:/^(\+)?\d+(\.\d+)?$/,
            message:'该内容必须为数字' 
          }
          ],},]"
        />
      </a-form-item>
      <a-form-item class="clearfix" label="截止时间">
        <a-date-picker
          class="f-left"
          v-decorator="[
            'expirationDate',
            { rules: [{ required: true,message:'请输入截止日期' }],
            initialValue:(defultForm.expirationDate?defultForm.expirationDate:null)},
          ]"
        />
        <a-form-item class="f-left ml-20">
          <a-checkbox
            :checked="checkNick"
            @change="checkChange"
            v-decorator="['isLongTime',
            {initialValue:defultForm.isLongTime},]"
          >长期需求</a-checkbox>
        </a-form-item>
      </a-form-item>
      <a-form-item label="联系人">
        <a-input
          v-decorator="[
              'contacts',
              { rules: [{ required: true,message:'请输入联系人' }],
              initialValue:defultForm.contacts }
            ]"
        />
      </a-form-item>
      <a-form-item label="联系电话">
        <a-input
          v-decorator="[
              'phone',
              { rules: [
                { required: true,message:'请输入联系电话' },
                {
                  pattern:  /^1[3456789]\d{9}$/,
                  message: '手机号码格式不正确'
                },
                
              ], initialValue:defultForm.phone},
            ]"
        />
      </a-form-item>
      <a-form-item label="电子邮箱">
        <a-input
          v-decorator="[
              'email',
              { rules: [
                {
                  pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
                  message: '邮箱格式不正确'
                },
              ], initialValue:defultForm.email},
            ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";
import {
  GetSearchinfo,
  GetByParent,
  UpdateMaterialsDemand
} from "@/apis/user/MaterialsDemand";
export default {
  props: ["msg"],
  data() {
    return {
      checkNick: false,
      selectType: [],
      selectType1: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      formItemLayout: {
        labelCol: { sm: { span: 6 } },
        wrapperCol: { sm: { span: 14 } }
      },
      defultForm: {
        id: this.id
      },
      formLine: {}
    };
  },
  created() {
    this.GetByParentList();
    console.log(this.defultForm.id);
  },
  methods: {
    checkChange(e) {
      this.checkNick = e.target.checked;
    },
    //提交按钮
    submit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          values.expirationDate = moment(values.expirationDate).format(
            "YYYY-MM-DD"
          );
          this.defultForm.demandProductName = values.demandProductName;
          this.defultForm.productSynonymName = values.productSynonymName;
          this.defultForm.productOneCategory = values.productOneCategory;
          this.defultForm.productSecondCategory = values.productSecondCategory;
          this.defultForm.productThirdCategory = values.productThirdCategory;
          this.defultForm.productSpec = values.productSpec;
          this.defultForm.demandDetails = values.demandDetails;
          this.defultForm.price = values.price
          this.defultForm.expirationDate = values.expirationDate;
          this.defultForm.isLongTime = values.isLongTime;
          this.defultForm.contacts = values.contacts;
          this.defultForm.phone = values.phone;
          this.defultForm.email = values.email;
          console.log(this.defultForm);
          this.UpdateMaterialsDemand();
          setTimeout(() => {
            // 清空表单
            this.form.resetFields();
          }, 1000);
        }
      });
    },
    //取消按钮
    handleCancel(e) {
      console.log("Clicked cancel button");
      // 清空表单
      this.form.resetFields();
      this.visible = false;
    },
    //修改
    UpdateMaterialsDemand() {
      let formData = JSON.parse(JSON.stringify(this.defultForm))
      formData.price = formData.price === '' || formData.price === null ? '0' : formData.price
      formData.email = formData.email === '' || formData.email === null ? '' : formData.email
      UpdateMaterialsDemand(formData).then(res => {
        console.log(res);
        if(res.code==200){
          this.$message.success("修改成功");
          this.visible = false;
          this.$parent.GetSearchPageList();
        }else{
          this.$message.warning('修改失败');
        }
      });
    },
    // 产品分类下拉列表
    GetByParentList() {
      GetByParent().then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.selectType = res.data;
        }
      });
    },
    handleChange(value) {
      console.log(value);
      let id = "";
      this.selectType.map((item, index) => {
        if (item.categoryNo == value) {
          id = item.id;
        }
      });
      let params = { pid: id };
      GetByParent(params).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.selectType1 = res.data;
        }
      });
    },
    handleChange1(value) {
      console.log(value);
    },
    // 获取需求列表
    GetSearchinfo(id) {
      GetSearchinfo({ id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.defultForm = res.data;
          this.defultForm.price = this.defultForm.price === 0 ? '' : this.defultForm.price
          // console.log(this.defultForm);
          
          let id = '';
          this.selectType.map((item, index) => {
            if (item.categoryNo == this.defultForm.productOneCategory) {
              id = item.id;
            }
          });
          let params = { pid:id };
          console.log(params)
          GetByParent(params).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.selectType1 = res.data;
            }
          });
        }
      });
    }
  },
  watch: {
    msg(newVal) {
      this.defultForm.id = newVal;
      // console.log(this.defultForm.id)
      this.GetSearchinfo(this.defultForm.id);
    }
  }
};
</script>

<style lang="less">
.top-title {
  font-size: 22px;
  font-weight: 700;
}
</style>